<template>
  <view class="shop-upload">
    <view>
      <view style="font-size: 28rpx;margin-bottom: 20rpx;margin-top: 40rpx">
        商家封面
      </view>
      <u-upload @on-choose-complete="onChooseComplete" :auto-upload="false" width="690" height ="300" :custom-btn="true"  max-count="1">
        <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
          <u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
        </view>
      </u-upload>
    </view>

    <view>
      <u-button :custom-style="customStyle" shape="circle" @click="submit">上传照片</u-button>
    </view>
  </view>
</template>

<script>
import {pathToBase64} from "image-tools";
import {addShopImg} from "../../../../api/shop";
import {getGamerByUserId} from "../../../../api/gamer";
import {getShop} from "../../../../api/business";
export default {
name: "index",
  data() {
    return{
      img:'',
      customStyle1:{
        backgroundColor: '#f7f7f8',
        color: '#9a9a9a'
      },
      customStyle: {
        marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: 'white',
        backgroundColor:'#10d169',
      },

    }
  },
  methods:{
    onChooseComplete(lists) {
      pathToBase64(lists[0].url).then(data=>{
        this.img = data
      })
    },
    async submit() {
      uni.showLoading({
        title: '上传中'
      });
      const res = await addShopImg({
        imgs:[this.img],
      });

      const shop = await getShop({
        f_user_id: uni.getStorageSync('userInfo').id
      })
      uni.setStorageSync('shopInfo', shop.data.data);
      uni.hideLoading();
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-upload{
  min-height: 100vh;
  padding: 20rpx;
  .slot-btn {
    width: 710rpx;
    height: 300rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;
  }

  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }
}
</style>
